<template>
  <div class="search-choose">
    <!-- 搜索模块 -->
    <div class="sbox">
      <div class="searchbox">
        <van-search
          v-model="value"
          show-action
          placeholder="订单号/区服/发布人/标题"
          @search="onSearch"
        >
          <template #action>
            <div
              @click="onClickButton"
              style="
                background: #5190ff;
                width: 13vw;
                color: #eee;
                text-align: center;
              "
            >
              搜索
            </div>
          </template>
        </van-search>
      </div>
    </div>

    <!-- 下拉选择分类模块 -->
    <div class="choosebox">
      <van-dropdown-menu active-color="#5190ff">
        <van-dropdown-item title="游戏区服" @click="handle">
          <van-tree-select
            :items="items"
            :active-id.sync="activeId"
            :main-active-index.sync="activeIndex"
            @click.native="handleGame"
          />
        </van-dropdown-item>

        <van-dropdown-item title="综合排序" @click="handle">
          <van-cell
            center
            v-for="(val, ind) in sortlist.data"
            :key="ind"
            :title="val"
            @click="inde = ind"
            :class="inde == ind ? 'sortactive' : ''"
          >
          </van-cell>
        </van-dropdown-item>

        <van-dropdown-item title="高级筛选" @click="handle">
          <ul class="screen">
            <li>
              <p>{{ screenlist[0].title }}</p>
              <div class="content">
                <span
                  v-for="(val, index) in screenlist[0].List"
                  :key="index"
                  @click="screenPrice(index)"
                  class="price"
                  :class="actInd0 == index ? `active3` : ''"
                  >{{ val }}</span
                >
              </div>
            </li>
            <li>
              <p>{{ screenlist[1].title }}</p>
              <div class="content">
                <span
                  v-for="(val, index) in screenlist[1].List"
                  :key="index"
                  @click="screenInit(index)"
                  class="init"
                  :class="actInd1 == index ? `active3` : ''"
                  >{{ val }}</span
                >
              </div>
            </li>
            <li>
              <p>{{ screenlist[2].title }}</p>
              <div class="content">
                <span
                  v-for="(val, index) in screenlist[2].List"
                  :key="index"
                  @click="screengLobal(index)"
                  class="global"
                  :class="actInd2 == index ? `active3` : ''"
                  >{{ val }}</span
                >
              </div>
            </li>
            <li class="btn">
              <p>
                <button class="refresh" @click="refresh">重置</button>
                <button class="commit" @click="commit">完成</button>
              </p>
            </li>
          </ul>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { mapState } from "vuex";
export default {
  data() {
    return {
      actInd0: 0,
      actInd1: 0,
      actInd2: 0,
      //vant组件
      // active: 0,
      activeId: 1,
      activeIndex: 0,
      sortlist: {
        data: [
          "综合排序",
          "价格由低到高",
          "价格由高到低",
          "保证金由低到高",
          "总时间由少到多",
        ],
      },
      ind: -1,
      inde: 0,
      value: null,
      // switch2: 2,
    };
  },
  computed: {
    ...mapState({
      screenlist: (state) => state.orderlist.screenlist,
      items: (state) => state.orderlist.items,
    }),
  },
  created() {
    axios.get("/dl/wap/getAreasListByGameId?gameId=314").then((res) => {
      // console.log(res);
      this.$store.dispatch("orderlist/getGameSysListAct", res);
    });
    axios
      .get("dl/wap/getServersListByAreaId?areaId=2142&gameId=314")
      .then((res) => {
        this.$store.dispatch("orderlist/getGameServerAct", res);
      });
    axios.get("/dl/wap/getWapDlGameList").then((res) => {
      this.$store.dispatch("orderlist/getGameIdAct", res);
    });
  },
  methods: {
    // 筛选选项
    screenPrice(index) {
      this.actInd0 = index;
      // console.log(this.actInd0);
    },
    screenInit(index) {
      this.actInd1 = index;
      // console.log(this.actInd1);
      
    },
    screengLobal(index) {
      this.actInd2 = index;
      // console.log(this.actInd2);
    },
    refresh() {
      this.actInd0 = 0;
      this.actInd1 = 0;
      this.actInd2 = 0;
    },
    commit() {
      console.log("发起一个请求");
    },

    //游戏区服
    handleGame() {
      console.log("activeId:" + this.activeId);
      console.log("activeIndex:" + this.activeIndex);
      // console.log(this.items);
    },
    onSearch() {
      console.log("search");
    },
    onClickButton() {
      console.log("搜索");
    },
    handle() {
      console.log(this.chooselist);
    },
    onConfirm() {
      this.$refs.item.toggle();
    },
  },
};
</script>

<style src="../assets/css/choose.css" scoped>
</style>